<template>
  <div class="header w-100 flex align-center justify-between px-40 box-sizing">
      <p class="f18 f-bold c-blue cp" @click="goToHome">苏苏生鲜</p>
      <div class="flex align-center h-100">
        <Dropdown class="mr-40" v-if="isInOrOut" @on-click="handleCommand">
          <a href="javascript:void(0)" class="fc-white">
            {{ userInfo.username }}
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="personalCenter">个人中心</DropdownItem>
            <DropdownItem name="myOrder">我的订单</DropdownItem>
            <DropdownItem name="outLogin">退出登录</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <p class="fc-white mr-40 cp hoverBlue" v-if="!isInOrOut" @click="goToLogin">登录 | 注册</p>
        <div class="shopping cp" @click="goToShopping">
          <p>购物车</p>
        </div>
      </div>
    </div>
</template>

<script>
import mixins from '@/mixins/index.js'
import { outLogin } from 'api'
export default {
  name: 'headerComponent',
  mixins: [mixins],
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    // 前往首页
    goToHome () {
      this.$router.push({
        path: '/index',
      })
    },
    // 前往登录
    goToLogin() {
      this.$router.push({
        path: '/login',
      })
    },
    // 选择多种事件
    handleCommand(name) {
      if(name === 'personalCenter') {
        this.$router.push({
          path: '/personal-center',
          query: {
            isShow: 0
          }
        })
      } else if (name === 'myOrder'){
        this.$router.push({
          path: '/personal-center',
          query: {
            isShow: 1
          }
        })
      } else {
        outLogin().then(res => {
          this.$Message.error('已退出登录')
          this.emptyUserInfo()
          this.$router.replace({
            path: '/login'
          })
        })
      }
    },
    // 前往购物车
    goToShopping() {
      this.$router.push({
        path: '/shopping-trolley'
      })
    },
  }
}
</script>

<style scoped >
.header{
  height: 50px;
  background: rgb(51,51,51);
}
.c-blue{
  color: rgb(27,174,174);
}
.shopping{
  height: 100%;
  width: 100px;
  display: flex;
  color: #fff;
  align-items: center;
  justify-content: center;
  background: rgb(27,174,174);
}
.hoverBlue:hover {
  color: rgb(102,177,255);
}
</style>